<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
		<title>用户后台管理</title>

		<link rel="stylesheet" href="u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

		<link rel="stylesheet" href="u-admin/dist/modules/summernote/summernote-lite.css">
		<link rel="stylesheet" href="u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
		<link rel="stylesheet" href="u-admin/dist/css/demo.css">
		<link rel="stylesheet" href="u-admin/dist/css/style.css">
		<link rel="stylesheet" href="css/jquery.pagination.css" />
		<style>
			.unShow{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="main-wrapper">
				<div class="navbar-bg"></div>
				<div th:replace="commons/u-admin-bar::#navbar"></div>
				<div th:replace="commons/u-admin-bar::#sidebar(currUri='kinds-and-tags')"></div>

				<div class="main-content">
					<section class="section">
						<h1 class="section-header">
							<div><i class="icon ion-ios-pricetag"></i> 分类目录和标签</div>
						</h1>
						<div class="row">
							<div class="col-12 col-md-6 col-lg-6">
								<div class="card">
									<div class="card-header">
										<div class="float-right">
											<form th:action="@{addArticleKindOrTag}" method="post">
												<div class="input-group">
													<input name="kindName" required="required" type="text" class="form-control" placeholder="添加分类目录">
													<div class="input-group-btn">
														<button class="btn btn-secondary"><i class="ion ion-plus-round"></i></button>
													</div>
												</div>
											</form>
										</div>
										<h5>分类目录 ( [[${kindCount}]] )</h5>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table class="table table-bordered" th:if="${kinds.size() != 0}">
												<tr>
													<th style="width: 10%">编号</th>
													<th style="width: 70%">分类目录名称</th>
													<th style="width: 20%">文章总数</th>
												</tr>
												<tr th:each="kind:${kinds}" class="font-weight-normal">
													<td style="text-align: center" th:text="${kindStat.index+1}+${(pageKind.getPageNum()-1)*pageKind.getPageSize()}"></td>
													<td th:class="w-75" > <span th:text="${kind.articleKindName}"></span>
														<div class="table-links">
															<div class="bullet"></div>
															<a href="#">查看 | </a>
															<a href="javaScript:Void(0)" th:onclick="'javascript:showKindDiv('+${kind.articleKindId}+')'">编辑 | </a>
															<a th:href="@{/deleteArticleKindOrTag(kindId=${kind.articleKindId})}" style="color: red">删除</a>
															<form action="editArticleKindOrTag" method="post" th:id="kindDiv_+${kind.articleKindId}" class="input-group unShow">
																<input th:value="${kind.articleKindId}" name="kindId" type="hidden">
																<input th:id="kindInput_+${kind.articleKindId}" name="kindName"
																	   type="text" class="form-control" placeholder="修改分类目录">
																<div class="input-group-btn">
																	<button class="btn btn-secondary">修改</button>
																</div>
															</form>
														</div>
													</td>
													<td style="text-align: center"><a href="#" th:text="${kind.count}"></a></td>
												</tr>
											</table>
										</div>
									</div>
									<div class="card-footer text-right">
										<nav class="d-inline-block">
											<div id="pagination1" class="page fl"></div>
										</nav>
									</div>
								</div>
							</div>
							<div class="col-12 col-md-6 col-lg-6">
								<div class="card">
									<div class="card-header">
										<div class="float-right">
											<form th:action="@{addArticleKindOrTag}" method="post">
												<div class="input-group">
													<input type="text" required="required" name="tagName" class="form-control" placeholder="添加标签">
													<div class="input-group-btn">
														<button class="btn btn-secondary"><i class="ion ion-plus-round"></i></button>
													</div>
												</div>
											</form>
										</div>
										<h5>标签 ( [[${tagCount}]] )</h5>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table class="table table-bordered" th:if="${tags.size()!=0}">
												<tr>
													<th style="width: 10%">编号</th>
													<th style="width: 70%">标签名称</th>
													<th style="width: 20%" class="align-content-center">文章总数</th>
												</tr>
												<tr th:each="tag:${tags}" class="font-weight-normal">
													<td style="text-align: center" th:text="${tagStat.index+1}+${(pageTag.getPageNum()-1)*pageTag.getPageSize()}"></td>
													<td th:class="w-75" > <span th:text="${tag.articleTagName}"></span>
														<div class="table-links">
															<div class="bullet"></div>
															<a href="#">查看 | </a>
															<a href="javaScript:Void(0)" th:onclick="'javascript:showTagDiv('+${tag.tag.getArticleTagId()}+')'">编辑 | </a>
															<a th:href="@{/deleteArticleKindOrTag(tagId=${tag.tag.getArticleTagId()})}" style="color: red">删除</a>
															<form th:action="@{/editArticleKindOrTag}" method="post" th:id="tagDiv_+${tag.tag.getArticleTagId()}" class="input-group unShow">
																<input th:name="tagId" th:value="${tag.tag.getArticleTagId()}" type="hidden">
																<input th:id="tagInput_+${tag.tag.getArticleTagId()}"
																	  type="text" class="form-control" name="tagName"
																	  placeholder="修改标签">
																<div class="input-group-btn">
																	<button class="btn btn-secondary">修改</button>
																</div>
															</form>
														</div>
													</td>
													<td style="text-align: center"><a href="#" th:text="${tag.count}"></a></td>
												</tr>
											</table>
										</div>
									</div>
									<div class="card-footer text-right">
										<nav class="d-inline-block">
											<div id="pagination2" class="page fl"></div>
										</nav>
									</div>
								</div>
							</div>
						</div>
					</section>
				</div>
				<div th:replace="commons/u-admin-bar::#footer"></div>
			</div>
		</div>

		<script src="u-admin/dist/modules/jquery.min.js"></script>
		<script th:src="@{js/jquery.pagination.min.js}"></script>
		<script>
			$(function() {
				$("#pagination1").pagination({
					currentPage: [[${pageKind.getPageNum()}]],
					totalPage: [[${pageKind.getPages()}]],
					count:3,
					callback: function(current) {
						$("#current1").text(current);
						var location = window.location.href;
						let strings = location.split("molihub");
						console.log(strings[0]);
						window.location.href = strings[0]+"molihub/article-kinds-tags?which=kind&current="+current;
					}
				});
				$("#pagination2").pagination({
					currentPage: [[${pageTag.getPageNum()}]],
					totalPage: [[${pageTag.getPages()}]],
					count:3,
					callback: function(current) {
						$("#current1").text(current);
						var location = window.location.href;
						let strings = location.split("molihub");
						console.log(strings[0]);
						window.location.href = strings[0]+"molihub/article-kinds-tags?which=tag&current="+current;
					}
				});
			});
			function showKindDiv(a) {
				var id = '#kindDiv_'+a;
				if ($(id).hasClass('unShow')){
					$(id).removeClass('unShow');
				}else{
					$(id).addClass('unShow');
				}
			}
			function showTagDiv(a) {
				var id = '#tagDiv_'+a;
				if ($(id).hasClass('unShow')){
					$(id).removeClass('unShow');
				}else{
					$(id).addClass('unShow');
				}
			}
		</script>
		<script src="u-admin/dist/modules/popper.js"></script>
		<script src="u-admin/dist/modules/tooltip.js"></script>
		<script src="u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
		<script src="u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
		<script src="u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
		<script src="u-admin/dist/js/sa-functions.js"></script>

		<script src="u-admin/dist/modules/chart.min.js"></script>
		<script src="u-admin/dist/modules/summernote/summernote-lite.js"></script>

		<script src="u-admin/dist/js/scripts.js"></script>
		<script src="u-admin/dist/js/custom.js"></script>
		<script src="u-admin/dist/js/demo.js"></script>
	</body>
</html>
